<template>
  <div class="login_container">
    <el-row>
      <el-col :span="12" :xs="0"></el-col>
      <el-col :span="12" :xs="24">
        <!-- 登录的表单 -->
        <el-form
          class="login_form"
          :model="loginForm"
          :rules="rules"
          ref="loginForms"
        >
          <h1>Hello</h1>
          <h2>欢迎来到测试项目~~~~</h2>
          <el-form-item prop="username">
            <el-input
              :prefix-icon="User"
              v-model="loginForm.username"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              type="password"
              :prefix-icon="Lock"
              v-model="loginForm.password"
              show-password
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              :loading="loading"
              class="login_btn"
              type="primary"
              size="default"
              @click="login"
              >登录</el-button
            >
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
  import { User, Lock } from "@element-plus/icons-vue";
  import { ref, reactive } from "vue";
  import { useRouter, useRoute } from "vue-router";
  import useUserStore from "@/store/modules/user";
  import { ElNotification } from "element-plus";
  import { getTime } from "@/utils/time";

  const loginForm = reactive({
    username: "admin",
    password: "111111"
  });
  const loading = ref(false);
  const userStore = useUserStore();
  const $router = useRouter();
  const $route = useRoute();
  const loginForms = ref<HTMLFormElement | null>(null);

  const login = async () => {
    await loginForms.value?.validate();
    try {
      loading.value = true;
      await userStore.userLogin(loginForm);
      let redirect = $route.query.redirect as string;
      $router.push({ path: redirect || "/" });
      ElNotification({
        type: "success",
        message: "登陆成功",
        title: `HI,${getTime()}好`
      });
    } catch (error) {
      ElNotification({
        type: "error",
        message: (error as Error).message
      });
    } finally {
      loading.value = false;
    }
  };

  //自定义校验规则函数
  const validatorUserName = (rule: any, value: any, callback: any) => {
    //rule:即为校验规则对象
    //value:即为表单元素文本内容
    //函数:如果符合条件callBack放行通过即为
    //如果不符合条件callBack方法,注入错误提示信息
    if (value.length >= 5) {
      callback();
    } else {
      callback(new Error("账号长度至少五位"));
    }
  };

  const validatorPassword = (rule: any, value: any, callback: any) => {
    if (value.length >= 6) {
      callback();
    } else {
      callback(new Error("密码长度至少六位"));
    }
  };

  const rules = {
    username: [
      // { required: true, min: 6, max: 10, message: '账号长度至少六位', trigger: 'change' }
      { trigger: "change", validator: validatorUserName }
    ],
    password: [
      // { required: true, min: 6, max: 15, message: '密码长度至少6位', trigger: 'change' }
      { trigger: "change", validator: validatorPassword }
    ]
  };
</script>

<style scoped lang="scss">
  .login_container {
    width: 100%;
    height: 100vh;
    background: url("@/assets/images/background.jpg") no-repeat;
    background-size: cover;

    .login_form {
      position: relative;
      width: 80%;
      top: 30vh;
      background: url("@/assets/images/login_form.png") no-repeat;
      background-size: cover;
      padding: 40px;

      h1 {
        color: white;
        font-size: 40px;
      }

      h2 {
        font-size: 20px;
        color: white;
        margin: 20px 0px;
      }

      .login_btn {
        width: 100%;
      }
    }
  }
</style>
